<template>
  <el-table
    @row-click="cellClicks"
    :data="tableData"
    style="width: 100%"
    header-row-class-name="header_stock"
    ref="chatContent"
    :max-height="height"
    class="stock_list_table"
    v-loading="sortList.loading"
    :height="height"
  >
    <el-table-column
      fixed
      :label="$t('quotation.left_list.56hzdc682d00')"
      min-width="120"
      class-name="stock_list_left"
      prop="name"
    >
      <template slot-scope="scope">
        <h2 class="f-cb stock_list_h2">{{ scope.row.name }}</h2>
        <p class="stock_list_p">
          <!-- <span
            :class="
              scope.row.market == 'HKEX'
                ? 'hk'
                : scope.row.market == 'US'
                ? 'us'
                : 'sh'
            "
            >{{ scope.row.market | Market }}</span> -->
          <img
            class="type_icon"
            :src="
              scope.row.market == 'HKEX'
                ? HKicon
                : scope.row.market == 'US'
                ? USicon
                : scope.row.market == 'SSE'
                ? SHicon
                : SZicon
            "
            alt=""
          />
          {{ scope.row.stockCode || scope.row.symbol }}
        </p>
      </template>
    </el-table-column>
    <el-table-column
      v-if="sortList.type == 1"
      :label="$t('stock.Ashare_List.56hzew2xbp40')"
      min-width="100"
    >
      <template slot-scope="scope">
        <div class="red">
          {{ scope.row.tradedShares > 0 ? "+" : ""
          }}{{ scope.row.tradedShares | changeNum(te) }}
        </div>
      </template>
    </el-table-column>
    <el-table-column
      v-if="sortList.type == 1"
      :label="$t('stock.Ashare_List.56hzew2xc8g0')"
      min-width="100"
    >
      <template slot-scope="scope">
        <div class="red">
          {{ scope.row.direction > 0 ? "+" : ""
          }}{{ scope.row.direction | changeNum(te) }}
        </div>
      </template>
    </el-table-column>
    <el-table-column v-if="sortList.type == 1" :label="$t('stock.Ashare_List.56hzew2xcco0')" min-width="100">
      <template slot-scope="scope">
        {{ scope.row.industry }}
      </template>
    </el-table-column>

    <el-table-column v-if="sortList.type == 2" :label="$t('stock.Ashare_List.56hzew2xcfo0')" min-width="100">
      <template slot-scope="scope">
        <div class="red">
          {{ Number(scope.row.price) | toFixed(scope.row.precision) }}
        </div>
      </template>
    </el-table-column>
    <el-table-column v-if="sortList.type == 2" :label="$t('stock.Ashare_List.56hzew2xcio0')" min-width="100">
      <template slot-scope="scope">
        <div class="red">
          {{ scope.row.chg > 0 ? "+" : ""
          }}{{ Number(scope.row.chg * 100) | toFixed(2) }}%
        </div>
      </template>
    </el-table-column>
    <el-table-column v-if="sortList.type == 2" :label="$t('stock.Ashare_List.56hzew2xcls0')" min-width="100">
      <template slot-scope="scope">
        <div class="red">
          {{ scope.row.rise > 0 ? "+" : ""
          }}{{ Number(scope.row.rise) | toFixed(2) }}
        </div>
      </template>
    </el-table-column>

    <el-table-column v-if="sortList.type == 3" :label="$t('stock.Ashare_List.56hzew2xcoo0')" min-width="100">
      <template slot-scope="scope">
        {{ scope.row.purchase | changeNum(te) }}
      </template>
    </el-table-column>
    <el-table-column v-if="sortList.type == 3" :label="$t('stock.Ashare_List.56hzew2xcrk0')" min-width="100">
      <template slot-scope="scope">
        {{ scope.row.sell | changeNum(te) }}
      </template>
    </el-table-column>
    <el-table-column v-if="sortList.type == 3" :label="$t('stock.Ashare_List.56hzew2xcvo0')" min-width="100">
      <template slot-scope="scope">
        {{ scope.row.total | changeNum(te) }}
      </template>
    </el-table-column>

    <el-table-column v-if="sortList.type == 4" :label="$t('stock.Ashare_List.56hzew2xcyo0')" min-width="100">
      <template slot-scope="scope">
        {{ scope.row.Shareholding | changeNum(te) }}
      </template>
    </el-table-column>
    <el-table-column v-if="sortList.type == 4" :label="$t('stock.Ashare_List.56hzew2xd180')" min-width="100">
      <template slot-scope="scope">
        {{ scope.row.MarketValue | changeNum(te) }}
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  props: ["sortList", "stockHeight", "tableData"],
  data() {
    return {
      height: null,
      scroll: 0,
      windowHeight: 0,
      scrollHeight: 0,
      HKicon: require("@/assets/img/icon_hk.png"),
      USicon: require("@/assets/img/icon_us.png"),
      SHicon: require("@/assets/img/icon_sh.png"),
      SZicon: require("@/assets/img/icon_sz(1).png"),
    };
  },
  mounted() {
    var _this = this;
    this.getHeight();
    $(window).resize(function () {
      _this.getHeight();
    });
    // 通过$refs获取dom元素
    var box = this.$refs.chatContent.bodyWrapper;
    box.addEventListener("scroll", this.paperScroll);
  },
  methods: {
    getHeight() {
      if ($(window).width() > 1920) {
        this.height = this.stockHeight;
      } else {
        this.height = 285;
      }
    },
    paperScroll() {
      var _this = this;
      var box = this.$refs.chatContent.bodyWrapper;
      // 滚动距离
      this.scroll = box.scrollTop;
      // 变量windowHeight是可视区的高度
      this.windowHeight = box.clientHeight || box.clientHeight;
      // 变量scrollHeight是滚动条的总高度
      this.scrollHeight = box.scrollHeight || box.scrollHeight;
      if (
        this.scroll + this.windowHeight == this.scrollHeight &&
        this.tableData.length >= 20
      ) {
        _this.getupdata();
        // 获取到的不是全部数据 当滚动到底部 继续获取新的数据
      }
      //console.log(this.scroll)
    },
    getupdata() {
      this.$emit("scrollBottom");
    },
    // sotrname(column) {
    //   console.log(column)
    //   this.sortFor(column.prop, column.order);
    // },
    sortPrice(obj1, obj2) {
      let val1 = obj1.latestPrice;
      let val2 = obj2.latestPrice;
      let res = val1 - val2;
      return res;
    },
    sortGain(obj1, obj2) {
      let val1 = Number(obj1.gain);
      let val2 = Number(obj2.gain);
      let res = val1 - val2;
      return res;
    },
    cellClicks(row) {
      var StockData = {
        securityType: row.securityType,
        symbol: row.symbol,
        market: row.market,
      };
      this.$store.dispatch("SetStockData", StockData);
      this.$emit("ListClick", true);
    },
    // sortFor(obj, order) {
    //   console.log(this.sortList,"数组")
    //   // 数组中的元素需为以下三者之一：ascending 表示升序，descending 表示降序，null 表示还原为原始顺序
    //   if (order == "ascending") {
    //     this.sortList.submit[obj] = this.sortList[obj][1];
    //   } else if (order == "descending") {
    //     this.sortList.submit[obj] = this.sortList[obj][2];
    //   } else {
    //     this.sortList.submit[obj] = this.sortList[obj][0];
    //   }
    // }
  },
  watch: {
    stockHeight(val) {
      this.height = val;
    },
  },
};
</script>
<style lang="less">
.stock_list_table {
  .el-table__header {
    .header_stock {
      height: 40px;
    }
    th {
      border-bottom: 1px solid @LightBorderLine;
    }
    .cell {
      font-size: 12px;
      color: @Dark_gray !important;
      font-weight: normal;
    }
    .stock_list_right {
      .cell {
        text-align: left;
      }
    }
    .stock_list_center {
      .cell {
        text-align: left;
      }
    }
    .stock_list_left {
      background: @deepBg;
    }
  }
  .el-table__body {
    cursor: pointer;
    .stock_list_left {
      background: @deepBg;
      padding-bottom: 0;
      .stock_list_h2 {
        position: relative;
        font-size: 12px;
        color: @fff;
        line-height: 24px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-top: 4px;
        background: none;
        padding: 0;

        b {
          display: block;
          width: 100%;
          font-weight: normal;
          word-break: break-all;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
          height: 22px;
        }
      }
      .stock_list_p {
        font-size: 12px;
        color: @fff;
        margin-bottom: 4px;
        line-height: 16px;
        span {
          float: left;
          margin-top: 1px;
          display: block;
          margin-right: 4px;
          font-size: 12px;
          color: @fff;
          padding: 0 4px;
          display: block;
          height: 14px;
          line-height: 14px;
        }
        .type_icon {
          height: 13px;
          margin-right: 5px;
        }
        .warn_icon {
          width: 16px;
        }
      }
    }

    .cell {
      color: @fff;
      font-size: 12px;
    }

    .stock_list_right {
      .cell {
        text-align: left;
        h2 {
          font-size: 14px;
          color: @fff;
        }
      }
    }
    td {
      border-bottom: 1px solid @LightBorderLine;
    }
  }
  .el-table__fixed::before {
    display: none;
  }

  .el-loading-mask {
    background: none;
  }
}
</style>